<template>
  <div class="update-name">
    <van-nav-bar
      title="设置昵称"
      left-text="取消"
      right-text="完成"
      @click-left="$emit('close')"
      @click-right="onUpdateProfile"
    />
    <!-- 输入框 -->
    <div class="filed-wrap">
      <van-field
        v-model="localName"
        rows="2"
        autosize
        type="textarea"
        maxlength="11"
        placeholder="请输入留言"
        show-word-limit
      />
    </div>
  </div>
</template>

<script>
import { updateUserProfile } from '@/api/login.js'
export default {
  name: "updateName",
  props: {
    value: {
      type: String,
      required: true,
    },
  },
  mounted() {
   
  },
  data() {
    return {
      localName: this.value, //输入框输入的内容
    };
  },
  methods:{
    async onUpdateProfile(){
      this.$toast.loading({
        message:'保存中.....',
        forbidClick:true,//禁止背景点击
        duration:0,//持续展示
      })
      try{
        if(!this.localName.length){
          this.$toast('昵称不能为空')
          return 
        }
        await updateUserProfile({
          name:this.localName,
        })
        // 更新视图
        this.$emit('input',this.localName)
        // 关闭弹层
        this.$emit('close')
        // 提示信息
        this.$toast.success('更新成功')
      }catch(err){
        this.$toast.fail('更新失败')
      }
    },
  }
};
</script>

<style scoped lang="less">
.filed-wrap {
  padding: 20px;
}
</style>